<template>
  <div class="buttonConfig">
    <div class="step1_header">
      <el-button
        type="primary"
        icon="el-icon-plus"
        style="background: #2f54eb"
        size="small"
        @click="() => handleOperate()"
        >新增</el-button
      >
      <el-button
        icon="el-icon-delete"
        type="danger"
        size="small"
        @click="handleDelete"
        :disabled="!chooseList.length"
        >删除</el-button
      >
    </div>
    <div class="table">
      <el-table
        :data="list_step1"
        border
        style="width: 100%"
        size="mini"
        row-key="uuid"
        key="step1"
        ref="multipleTable"
        class="step1Table"
      >
        <el-table-column width="55" align="center">
          <template>
            <i class="el-icon-s-operation moveIcon"></i>
          </template>
        </el-table-column>
        <el-table-column width="55" align="center">
          <template slot="header">
            <el-checkbox
              v-model="checkAll"
              :indeterminate="indeterminate"
              @change="handleCheckAllChange"
            ></el-checkbox>
          </template>
          <template slot-scope="scope">
            <el-checkbox
              v-model="ischeckedItem[`${scope.$index}`]"
              @change="getCurrentRow(scope.row)"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="序号" width="55" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="buttonType" label="" align="center">
          <template slot="header">
            <div class="header">
              <span class="require">*</span>
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">操作类型</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div v-clickoutside="() => handleClickOutside(scope, 'buttonType')">
              <p
                v-show="!scope.row[`isShow${'buttonType'}`]"
                class="tr_txt"
                @click="() => handleInputEdit(scope, 'buttonType')"
              >
                {{
                  selectDictLabel(
                    dict.type.pt_app_page_button_type,
                    scope.row.buttonType
                  )
                }}
              </p>
              <div v-show="scope.row[`isShow${'buttonType'}`]">
                <el-select
                  v-model="scope.row.buttonType"
                  :popper-append-to-body="false"
                  popper-class="selectClass"
                  style="width: 100%"
                  @change="
                    (val) => handleSelectChange(val, 'buttonType', scope)
                  "
                >
                  <el-option
                    v-for="item in dict.type.pt_app_page_button_type"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="label" align="center">
          <template slot="header">
            <div class="header">
              <span class="require">*</span>
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">按钮名称</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div
              class="clickoutsideClass"
              v-clickoutside="() => handleClickOutside(scope, 'label')"
            >
              <p
                v-show="!scope.row[`isShow${'label'}`]"
                class="tr_txt"
                @click="() => handleInputEdit(scope, 'label')"
              >
                {{ scope.row.label }}
              </p>
              <el-input
                v-show="scope.row[`isShow${'label'}`]"
                v-model="scope.row.label"
                clearable
              />
              <p class="tableInputRules" v-show="scope.row[`isShow${'label'}`]">
                按钮名称不能为空
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="buttonLocation" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">按钮位置</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div
              v-clickoutside="() => handleClickOutside(scope, 'buttonLocation')"
            >
              <p
                v-show="!scope.row[`isShow${'buttonLocation'}`]"
                class="tr_txt"
                @click="() => handleInputEdit(scope, 'buttonLocation')"
              >
                {{
                  selectDictLabel(
                    dict.type.pt_app_page_button_position,
                    scope.row.buttonLocation
                  )
                }}
              </p>
              <div v-show="scope.row[`isShow${'buttonLocation'}`]">
                <el-select
                  v-model="scope.row.buttonLocation"
                  :popper-append-to-body="false"
                  popper-class="selectClass"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in dict.type.pt_app_page_button_position"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="level" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">按钮样式</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div v-clickoutside="() => handleClickOutside(scope, 'level')">
              <p
                v-show="!scope.row[`isShow${'level'}`]"
                class="tr_txt"
                @click="() => handleInputEdit(scope, 'level')"
              >
                {{
                  selectDictLabel(
                    dict.type.pt_app_page_button_style,
                    scope.row.level
                  )
                }}
              </p>
              <div v-show="scope.row[`isShow${'level'}`]">
                <el-select
                  v-model="scope.row.level"
                  :popper-append-to-body="false"
                  popper-class="selectClass"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in dict.type.pt_app_page_button_style"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="icon" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">按钮图标</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div v-clickoutside="() => handleClickOutside(scope, 'icon')">
              <p
                v-show="!scope.row[`isShow${'icon'}`]"
                class="tr_txt"
                @click="() => handleInputEdit(scope, 'icon')"
              >
                <svg-icon :icon-class="scope.row.icon" />
              </p>

              <div v-show="scope.row[`isShow${'icon'}`]">
                <el-popover
                  placement="bottom-start"
                  width="460"
                  trigger="click"
                  @show="$refs['iconSelect'].reset()"
                >
                  <IconSelect
                    ref="iconSelect"
                    @selected="(name) => selected(name, scope)"
                    :active-icon="scope.row.icon"
                  />
                  <el-input
                    slot="reference"
                    v-model="icon"
                    placeholder="点击选择图标"
                    readonly
                  >
                  </el-input>
                </el-popover>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="optionType" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">打开方式</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div v-clickoutside="() => handleClickOutside(scope, 'optionType')">
              <p
                v-show="!scope.row[`isShow${'optionType'}`]"
                class="tr_txt"
                @click="() => handleInputEdit(scope, 'optionType')"
              >
                {{
                  selectDictLabel(
                    dict.type.pt_app_page_button_open,
                    scope.row.optionType
                  )
                }}
              </p>
              <div v-show="scope.row[`isShow${'optionType'}`]">
                <el-select
                  v-model="scope.row.optionType"
                  :popper-append-to-body="false"
                  popper-class="selectClass"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in openMethods"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  />
                </el-select>
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="seq" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">编号</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div v-clickoutside="() => handleClickOutside(scope, 'seq')">
              <p
                v-show="!scope.row[`isShow${'seq'}`]"
                class="tr_txt"
                @click="() => handleInputEdit(scope, 'seq')"
              >
                {{ scope.row.seq }}
              </p>
              <div v-show="scope.row[`isShow${'seq'}`]">
                <el-input
                  v-model.number="scope.row.seq"
                  type="number"
                ></el-input>
              </div>
            </div>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="optionValue"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">操作配置</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div>
              <p
                class="tr_txt"
                style="
                  cursor: pointer;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: inline-block;
                  width: 90%;
                "
              >
                {{ scope.row.optionValue }}
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="associationFormName" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">关联表单</span>
            </div>
          </template>
          <template slot-scope="scope">
            <p class="tr_txt" @click="() => handleOpenForm(scope)">
              {{ scope.row.associationFormName }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="associationProcess" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">关联流程</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div
              v-clickoutside="
                () => handleClickOutside(scope, 'associationProcess')
              "
            >
              <p
                v-show="!scope.row[`isShow${'associationProcess'}`]"
                class="tr_txt"
                @click="() => handleInputEdit(scope, 'associationProcess')"
              >
                {{ getAssociationProcessName(scope.row.associationProcess) }}
              </p>
              <div v-show="scope.row[`isShow${'associationProcess'}`]">
                <el-select
                  v-model="scope.row.associationProcess"
                  :popper-append-to-body="false"
                  popper-class="selectClass"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in associationProcessList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="associationReport" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">关联报表</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div
              v-clickoutside="
                () => handleClickOutside(scope, 'associationReport')
              "
            >
              <p
                v-show="!scope.row[`isShow${'associationReport'}`]"
                class="tr_txt"
                @click="() => handleInputEdit(scope, 'associationReport')"
              >
                {{ getAssociationReportName(scope.row.associationReport) }}
              </p>
              <div v-show="scope.row[`isShow${'associationReport'}`]">
                <el-select
                  v-model="scope.row.associationReport"
                  :popper-append-to-body="false"
                  popper-class="selectClass"
                  style="width: 100%"
                  @change="(val)=>handleReportChange(val,scope.row)"
                >
                  <el-option
                    v-for="item in associationReportList"
                    :key="item.id"
                    :label="item.reportName"
                    :value="item.reportUrl"
                  />
                </el-select>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="permissions"
          align="center"
          min-width="120px"
          :show-overflow-tooltip="true"
        >
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">按钮权限</span>
            </div>
          </template>
          <template slot-scope="scope">
            <div
              v-clickoutside="() => handleClickOutside(scope, 'permissions')"
            >
              <p
                v-show="!scope.row[`isShow${'permissions'}`]"
                class="tr_txt"
                style="
                  cursor: pointer;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: inline-block;
                  width: 90%;
                "
                @click="() => handleInputEdit(scope, 'permissions')"
              >
                {{ viewRoleName(scope.row.permissions) }}
              </p>
              <div v-show="scope.row[`isShow${'permissions'}`]">
                <el-select
                  collapse-tags
                  multiple
                  v-model="scope.row.permissions"
                  :popper-append-to-body="false"
                  popper-class="selectClass"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in roleList"
                    :key="item.roleId"
                    :label="item.roleName"
                    :value="item.roleKey"
                  />
                </el-select>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="formatName" align="center">
          <template slot="header">
            <div class="header">
              <i class="el-icon-edit-outline"></i>
              <span class="headTxt">高级配置</span>
            </div>
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              :class="[isHasData(scope) ? 'isData' : null]"
              @click="handleDataConfig(scope)"
              :disabled="!['handleExt', 'zb','handleDel'].includes(scope.row.buttonType)"
              >配置</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Sortable from "sortablejs";
import Clickoutside from "element-ui/src/utils/clickoutside";
import { uuid } from "vue-uuid";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import IconSelect from "@/components/IconSelect";
import { listViewCode } from "@/api/app/menuConfig";
import { listRole } from "@/api/app/role";
import { reportList } from "@/api/app/report";
export default {
  name: "buttonConfig",
  directives: {
    Clickoutside,
  },
  dicts: [
    "pt_app_page_button_type",
    "pt_app_page_button_position",
    "pt_app_page_button_style",
    "pt_app_page_button_open",
    "pt_app_page_data_type",
  ],
  components: { Treeselect, IconSelect },
  data() {
    return {
      columnNameRules: "",
      chooseList: [],
      list_step1: [],
      checkAll: false,
      indeterminate: false,
      ischeckedItem: {},
      scope: undefined,
      associationProcessList: [],
      associationReportList: [],
      configIndex: undefined,
      openMethods: [],
      roleList: [],
    };
  },
  props: {
    openChooseTable: {
      type: Function,
      default: () => {},
    },
    getChooseTableList: {
      type: Function,
      default: () => {},
    },
    closeMOdel: {
      type: Function,
      default: () => {},
    },
    appId: {
      type: String,
      default: "",
    },
    dataConfigOpenFun: {
      type: Function,
      default: () => {},
    },
    dataConfigClose: {
      type: Function,
      default: () => {},
    },
  },
  watch: {
    chooseList: {
      immediate: true,
      deep: true,
      handler() {
        if (
          this.chooseList?.length &&
          this.chooseList?.length === this.list_step1?.length
        ) {
          this.checkAll = true;
          this.indeterminate = false;
        } else if (this.chooseList?.length) {
          this.indeterminate = true;
          this.checkAll = false;
        } else if (!this.chooseList?.length) {
          this.checkAll = false;
          this.indeterminate = false;
        }
      },
    },
  },
  async mounted() {
    if (
      sessionStorage.getItem("pageModel") &&
      JSON.parse(sessionStorage.getItem("pageModel"))?.step4
    ) {
      this.list_step1 = JSON.parse(sessionStorage.getItem("pageModel"))?.step4;
    }
    this.$nextTick(() => {
      this.rowDrop();
    });
    const res = await listViewCode({
      appId: this.appId,
      type: "process",
    });
    if (res.code == 200) {
      this.associationProcessList = res.data;
    }
    const listRoles = await listRole({
      pageNum: 1,
      pageSize: 999,
    });
    this.roleList = listRoles.rows;
    const associationReportList = await reportList({
      pageNum: 1,
      pageSize: 999,
      appId: this.appId,
    });
    if (associationReportList.code == 200) {
      this.associationReportList = associationReportList.rows;
    }
  },
  methods: {
    handleReportChange(val,row){
      row.optionValue = val
    },
    viewRoleName(list) {
      const name = [];
      this.roleList?.forEach((item) => {
        if (list?.includes(item.roleKey)) {
          name.push(item.roleName);
        }
      });
      if (name.length) {
        return name.toString();
      }
      return "";
    },
    getConfigData(type, value) {
      if (value) {
        if (type === "handleExt") {
          this.$set(this.list_step1, this.configIndex, {
            ...this.list_step1[this.configIndex],
            optJs: value.optJs,
            zdyLxb: value.zdyLxb,
          });
        }
        if (type === "zb") {
          this.$set(this.list_step1, this.configIndex, {
            ...this.list_step1[this.configIndex],
            zbCode: value.zbCode,
            cnSm: value.cnSm,
            zbDisplayButton: value.zbDisplayButton,
          });
        }
        if (type === "handleDel") {
          this.$set(this.list_step1, this.configIndex, {
            ...this.list_step1[this.configIndex],
            optJs: value.optJs,
          });
        }
      }
      this.dataConfigClose();
    },
    isHasData(scope) {
      if (scope.row.buttonType === "handleExt" && scope.row.optJs) {
        return true;
      } else if (scope.row.buttonType === "zb" && scope.row.zbCode) {
        return true;
      }else if (scope.row.buttonType === "handleDel" && scope.row.optJs) {
        return true;
      }
      return false;
    },
    handleDataConfig(scope) {
      this.configIndex = undefined;
      if (
        scope.row.buttonType === "handleExt" ||
        scope.row.buttonType === "zb" || 'handleDel'
      ) {
        this.configIndex = scope.$index;
        this.dataConfigOpenFun(scope.row);
      }
    },
    getAssociationProcessName(value) {
      if (value) {
        return this.associationProcessList.filter(
          (item) => item.code === value
        )?.[0]?.name;
      }
      return value;
    },
    getAssociationReportName(value) {
      if (value) {
        return this.associationReportList.filter(
          (item) => item.reportUrl === value
        )?.[0]?.reportName;
      }
      return value;
    },
    iconDefault(val) {
      if (val === "handleAdd") {
        return "xinjian";
      }
      if (val === "handleEdit") {
        return "bianji";
      }
      if (val === "handleDetail") {
        return "documentation";
      }
      if (val === "handleDel") {
        return "delete";
      }
      if (val === "handleAddFlow") {
        return "guide";
      }
      if (val === "handleDetailFlow") {
        return "rich-text";
      }
      if (val === "report") {
        return "dangan";
      }
      if (val === "processEdit") {
        return "log";
      }
      if (val === "handleExport") {
        return "excel";
      }
    },
    handleSelectChange(val, type, scope) {
      if (type === "buttonType") {
        this.$set(this.list_step1, [scope.$index], {
          ...this.list_step1[scope.$index],
          buttonLocation: ["handleAdd", "handleAddFlow",'handleExport'].includes(val)
            ? "top"
            : "row",
          label: this.selectDictLabel(
            this.dict.type.pt_app_page_button_type,
            scope.row.buttonType
          ),
          optionType:
            val === "handleDel" || val === 'handleExport'
              ? "ajax"
              : val === "zb"
              ? "form"
              : ["handleAddFlow", "handleDetailFlow"].includes(val)
              ? "page"
              : undefined,
          optionValue: undefined,
          associationFormName: undefined,
          associationProcess: undefined,
          seq: undefined,
          icon: this.iconDefault(val),
          level: val === "handleDel" ? "danger" : "primary",
        });
        this.openMethods = this.dict.type.pt_app_page_button_open;
        this.openMethods?.forEach((item) => {
          item.disabled = false;
          if (
            ["handleAdd", "handleEdit", "handleDetail", "zb"].includes(val) &&
            ["ajax", "page"].includes(item.value)
          ) {
            item.disabled = true;
          }
          if (
            ["handleAddFlow", "handleDetailFlow"].includes(val) &&
            ["ajax", "form"].includes(item.value)
          ) {
            item.disabled = true;
          }
        });
      }
    },
    // 选择图标
    selected(name, scope) {
      this.$set(this.list_step1, [scope.$index], {
        ...this.list_step1[scope.$index],
        icon: name,
      });
    },
    handleOpenForm(scope) {
      if (
        scope.row.buttonType === "zb" ||
        scope.row.buttonType === "handleExt" ||
        scope.row.buttonType === "handleAddFlow" ||
        scope.row.buttonType === "handleDetailFlow" ||
        scope.row.buttonType === "processEdit" ||
        scope.row.buttonType === "report"
      ) {
        return;
      }
      this.scope = scope;
      this.openChooseTable();
      this.getChooseTableList();
    },
    getChoostTableData(val) {
      console.log(this.list_step1[this.scope.$index].buttonType, val);
      this.$set(this.list_step1, [this.scope.$index], {
        ...this.list_step1[this.scope.$index],
        associationFormName: val.name,
        associationForm: val.id,
        optionValue: ["handleDel", "handleEdit", "handleDetail"].includes(
          this.list_step1[this.scope.$index].buttonType
        )
          ? val.formCodeExt
          : undefined,
      });
      this.closeMOdel();
    },
    getCurrentRow(key) {
      let isHas = false;
      for (const item of this.chooseList) {
        if (item.uuid === key.uuid) {
          this.chooseList = this.chooseList.filter(
            (val) => val.uuid !== key.uuid
          );
          isHas = true;
          break;
        }
      }
      if (!isHas) {
        this.chooseList.push(key);
      }
    },
    handleOperate() {
      this.list_step1 = [
        ...this.list_step1,
        {
          uuid: uuid.v1(),
        },
      ];
    },
    handleCheckAllChange(val) {
      if (val) {
        this.chooseList = [...this.list_step1];
        this.chooseList.forEach((item, index) => {
          this.$set(this.ischeckedItem, index, true);
        });
      } else {
        this.chooseList = [];
        for (let key in this.ischeckedItem) {
          this.ischeckedItem[key] = false;
        }
      }
    },
    handleClickOutside(scope, type) {
      this.$set(this.list_step1, [scope.$index], {
        ...this.list_step1[scope.$index],
        [`isShow${type}`]: false,
      });
    },
    handleInputEdit(scope, type) {
      //
      // 自定义
      if (
        scope.row.buttonType === "handleExt" &&
        [
          "optionType",
          "optionValue",
          "associationFormName",
          "associationProcess",
          "associationReport",
        ].includes(type)
      ) {
        return;
      }
      // 删除
      if (
        scope.row.buttonType === "handleDel" &&
        [
          "optionType",
          "optionValue",
          "associationProcess",
          "associationReport",
        ].includes(type)
      ) {
        return;
      }
      if (
        scope.row.buttonType === "handleExport" &&
        [
          "optionType",
          "optionValue",
          "associationProcess",
          "associationReport",
        ].includes(type)
      ) {
        return;
      }
      // 详情
      if (
        scope.row.buttonType === "handleDetail" &&
        ["optionValue", "associationProcess", "associationReport"].includes(
          type
        )
      ) {
        return;
      }
      // 编辑
      if (
        scope.row.buttonType === "handleEdit" &&
        ["optionValue", "associationProcess", "associationReport"].includes(
          type
        )
      ) {
        return;
      }
      // 新增
      if (
        scope.row.buttonType === "handleAdd" &&
        ["optionValue", "associationProcess", "associationReport"].includes(
          type
        )
      ) {
        return;
      }
      // 子表
      if (
        scope.row.buttonType === "zb" &&
        [
          "optionValue",
          "associationFormName",
          "associationProcess",
          "associationReport",
        ].includes(type)
      ) {
        return;
      }
      // 发起流程
      if (
        scope.row.buttonType === "handleAddFlow" &&
        ["optionValue", "associationFormName", "associationReport"].includes(
          type
        )
      ) {
        return;
      }
      // 流程详细
      if (
        scope.row.buttonType === "handleDetailFlow" &&
        ["optionValue", "associationFormName", "associationReport"].includes(
          type
        )
      ) {
        return;
      }
      // 流程草稿编辑
      if (
        scope.row.buttonType === "processEdit" &&
        ["optionValue", "associationFormName", "associationReport"].includes(
          type
        )
      ) {
        return;
      }
      // 打印
      if (
        scope.row.buttonType === "report" &&
        [
          "optionValue",
          "associationFormName",
          "optionType",
          "associationProcess",
        ].includes(type)
      ) {
        return;
      }
      if (type === "optionType") {
        this.openMethods = this.dict.type.pt_app_page_button_open;
        this.openMethods?.forEach((item) => {
          item.disabled = false;
          if (
            ["handleAdd", "handleEdit", "handleDetail", "zb"].includes(
              scope.row.buttonType
            ) &&
            ["ajax", "page"].includes(item.value)
          ) {
            item.disabled = true;
          }
          if (
            ["handleAddFlow", "handleDetailFlow", "processEdit"].includes(
              scope.row.buttonType
            ) &&
            ["ajax", "form"].includes(item.value)
          ) {
            item.disabled = true;
          }
        });
      }
      this.$set(this.list_step1, [scope.$index], {
        ...this.list_step1[scope.$index],
        [`isShow${type}`]: true,
      });
    },
    handleDelete() {
      this.$confirm("此操作将删除选中数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.list_step1 = this.list_step1.filter(
            (item) => !this.chooseList.some((ele) => ele.uuid === item.uuid)
          );
          this.chooseList = [];
          this.ischeckedItem = {};
        })
        .catch(() => {});
    },
    rowDrop() {
      const tbody = document.querySelectorAll(
        ".step1Table .el-table__body-wrapper tbody"
      )[0];
      const _this = this;
      Sortable.create(tbody, {
        animation: 150,
        ghostClass: "ghost",
        handle: ".moveIcon",
        onEnd({ newIndex, oldIndex }) {
          const list = JSON.parse(JSON.stringify(_this.list_step1));
          const currRow = list.splice(oldIndex, 1)[0];
          list.splice(newIndex, 0, currRow);
          _this.list_step1 = [];
          _this.chooseList = [];
          _this.ischeckedItem = {};
          _this.checkAll = false;
          _this.indeterminate = false;
          _this.$nextTick(() => {
            _this.list_step1 = list;
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.buttonConfig {
  .isData {
    position: relative;
    &::after {
      content: "";
      display: inline-block;
      width: 5px;
      height: 5px;
      background: red;
      border-radius: 50%;
      position: absolute;
      top: -3px;
      right: -2px;
    }
  }
  .ghost {
    opacity: 0.4;
  }
  .table {
    margin-top: 8px;
    .tr_txt {
      margin: 0;
      height: 36px;
      line-height: 36px;
    }
    .clickoutsideClass {
      position: relative;
    }
    ::v-deep .el-table .cell {
      overflow: visible;
    }
    .tableInputRules {
      // display: inline-block;
      border-radius: 4px;
      padding: 8px 12px;
      color: #fff;
      background-color: #f56c6c;
      pointer-events: auto;
      position: absolute;
      z-index: 999;
      top: -60px;
      left: 50%;
      transform: translateX(-50%);
      min-width: 100%;
    }
    ::v-deep .el-icon-s-operation {
      font-size: 24px;
      cursor: move;
    }
    ::v-deep .header {
      display: flex;
      align-items: center;
      justify-content: center;
      .require {
        color: red;
        margin-top: 8px;
        margin-right: 3px;
        font-size: 18px;
      }
      .el-icon-edit-outline {
        font-size: 18px;
        margin-right: 5px;
      }
    }
  }
}
</style>
